<script lang="ts" setup>
  import { ref, nextTick } from 'vue'
  import userService from '@/api/userService'
  import router from '@/router'
  import { encryptedData } from '@/api/crypto'
  import appStore from '@/store'
  import VueCookies from 'vue-cookies'
  import { ElMessageBox, ElMessage } from 'element-plus'
  const cookie: any = VueCookies
  let name = ref<string>('')
  let password = ref<string>('')
  const goHomePage = async () => {
    appStore.userStore.isLogin = true
    router.push({ name: 'Homepage' })
  }
  const login = async () => {
    let res = await userService.login(name.value, encryptedData(password.value))
    if (res.status < 300 && res.data.activation > 0) {
      localStorage.clear()
      appStore.userStore.updateLogin(true)
      appStore.userStore.updateName(res.data.username)
      localStorage.setItem('UserType', res.data.user_type)
      appStore.userStore.updateUserType(res.data.user_type)
      localStorage.setItem('user_id', res.data.id)
      appStore.userStore.updateChangeId(true)
      nextTick(() => {
        appStore.userStore.updateChangeId(false)
      })
      if (res.data.total_res_count <= 0 && res.data.user_type == 9) {
        ElMessageBox.alert('您没有关联资源租户，请新建租户', {
          confirmButtonText: 'OK',
          callback: () => {
            let id = localStorage.getItem('user_id') as string
            let name = appStore.userStore.name
            localStorage.setItem(
              'insertData',
              JSON.stringify({
                id,
                name
              })
            )
            router.push({ name: 'insertResourceConfig' })
          }
        })
      } else {
        goHomePage()
      }
    } else {
      ElMessage({
        message: '首次登陆请修改密码',
        type: 'warning'
      })
      cookie.remove('ExpireTime')
      appStore.userStore.$reset()
      appStore.userStore.updateName(res.data.username)
      router.push({ name: 'first' })
    }
  }
  const call = () => {
    ElMessageBox.alert('联系管理员XXX,电话:xxxxxxxxxxx', {
      confirmButtonText: 'OK',
      callback: () => {}
    })
  }
</script>
<template>
  <div id="login">
    <div class="content-box">
      <div class="bac-box"></div>
      <div class="login-box">
        <div class="mid">
          <div class="login-title">GameFlexMatch 账号登录</div>
          <el-form label-position="right" label-width="100px" style="margin-top: 27%">
            <el-form-item label-width="0">
              <el-input v-model="name" style="width: 400px; height: 50px" placeholder="账号名" />
            </el-form-item>
            <el-form-item label-width="0">
              <el-input v-model="password" type="password" style="width: 400px; height: 50px" placeholder="密码" show-password />
            </el-form-item>
          </el-form>
          <button class="btn new" style="width: 400px; height: 50px; margin-top: 70px; border-radius: 25px; font-size: 24px" @click="login">登录</button>
          <div class="tips">
            <span>我们为您提供华为帐号服务，在登录过程中会使用到您的帐号和网络信息提升登录体验。</span><span class="more" @click="call">联系超级管理员</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #login {
    background-image: url('@/assets/images/loginBg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    height: 100vh;
    position: relative;
    :deep(.el-input__wrapper) {
      border-radius: 25px;
      padding: 1px 26px;
    }
    :deep(.el-input__password) {
      font-size: 20px !important;
    }
    .el-form-item {
      margin-bottom: 30px;
    }
    .content-box {
      height: 100%;
      width: 100%;
      display: flex;
      margin: 0 auto;
      .bac-box {
        height: 100%;
        width: 71.3%;
      }
      .login-box {
        width: 28.7%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .mid {
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 30%;
        }
        .login-title {
          font-size: 36px;
          color: $text-color;
          margin-top: 30px;
          font-weight: 400;
        }
        .more-login {
          display: flex;
          margin-top: 30px;
          color: $action-color;
          font-size: 14px;
          height: 14px;
          line-height: 14px;
          cursor: pointer;
          .line {
            width: 1px;
            margin: 0 12px;
            background-color: $text-color;
          }
        }
        .tips {
          width: 400px;
          margin-top: 87px;
          font-size: 14px;
          color: $action-color;
          .more {
            color: $main-color;
            cursor: pointer;
          }
        }
      }
    }
    .my-header {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
